<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主界面</title>
    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">

    <script th:src="@{/js/jquery-3.3.1.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script>
        $(function () {
            $("#page1").click(function () {
                location.href="/user/page2"
            });
        });
    </script>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        nav a, footer a {
            color: white;
            height: 40px;
            line-height: 40px;
            text-decoration: none;
        }

        nav a:hover,footer a:hover{
            color: red;
        }
        img {
            display: inline-block;
        }
        h3 {
            margin: 5px 0;
        }
        em {
            color: red;
            font-style: normal;
        }
        strong{
            color: red;
        }


    </style>
</head>
<body>
<!--色号:#20c997-->
<!--导航栏-->
<nav style="background-color: #20c997;height: 40px;text-align: center;">
    <div style="float: left;margin-left: 20px">
        <a style="margin-left: 10px;" href="#">关于我们</a>
        <a style="margin-left: 10px;" href="#">联系客服</a>
        <a id="recharge" style="margin-left: 10px;" href="#">充值</a>
        <a id="tip1" style="margin-left: 10px;" href="">优惠券</a>
    </div>
    <span>
        <img th:src="@{/img/nav.png}" alt="">
    </span>

    <div style="float: right;margin-right: 20px;">
        <img th:src="@{/img/nav1.png}" alt="" height="20" style="margin-left: 20px">
        <a th:href="@{/user/login}" >登录注册</a>
        <img th:src="@{/img/nav2.png}" alt="" height="20" style="margin-left: 20px;">
        <a th:href="@{/user/shopping_car}">购物车</a>
        <img th:src="@{/img/nav3.png}" alt="" height="20" style="margin-left: 20px;">
        <a href="#">个人中心</a>
    </div>
</nav>
<div id="topUP" style="width: 500px;position:fixed !important;z-index: 9999;right: 500px;top: 200px;display: none">
    <form th:action="@{/user/recharge}">
    <div style="width: 500px;height: 300px;background-color: #d9ffe0;position: relative;">
        <button type="button" id="del" style="position: absolute;top: 10px;right: 20px;font-size: 24px;background-color:#d9ffe0;">x</button>
        <p style="margin: 10px;height: 30px;line-height: 30px;">充值</p>
        <p style="margin: 10px;height: 30px;line-height: 30px;">总计 (CNY) : <strong id="money2">0.00</strong></p>
        <div style="background-color: white;width: 90%;margin-left: 10px;padding: 5px;font-size: 20px;border-radius: 10px;">
            <p style="margin: 10px;height: 30px;line-height: 30px;">充值金额</p>
            ￥<input  name="money" type="text" id="money3" style="border: none;font-size: 20px;">
            <div style="height: 20px;"></div>
        </div>
        <input type="submit" style="width: 200px;padding:8px;border-radius: 10px;background-color:#4ecac5;position: absolute;bottom: 50px;left: 50%;text-align: center;margin-left: -100px;color: white;" value="立即支付">
    </div>
    </form>
</div>
<!--轮播图部分-->
<div style="width: 100%;float: left;">
    <!--    搜索框-->
    <div style="width: 1000px;height: 80px;margin: auto;">
        <div class="search" style="margin-left: 200px;">
            <form th:action="@{/user/search}">
            <input name="name" type="text" placeholder="请输入药品名称" class="search_input" autocomplete="off">
                <input type="submit"  class="search-button" value="搜索">
            </form>
        </div>
    </div>
    <!--    轮播图-->
    <section id="banner" style="width: 70%;margin: auto 250px;float: left;">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <a><li data-target="#carousel-example-generic" data-slide-to="2"></li></a>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img th:src="@{/img/nav-t1.jpg}" alt="" >
                </div>
                <div class="item">
                    <img  th:src="@{/img/nav-t2.jpg}" alt=""  >
                </div>
                <div class="item">
                    <a th:href="@{/user/page2}"><img id="pag1" th:src="@{/img/nav-t2.jpg}" alt=""></a>
                </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </section>

</div>

<!--内容-->
<section id="content" style="width: 100%;margin-top: 50px;">
    <!--   精品 -->
    <section style="width: 80%;margin: auto;">
        <div style="margin-top: 20px;">
            <span style="font-size: 32px;color:#20c997; ">精品推荐</span>
            <span>为你推荐健康好药材</span>
        </div>
        <div style="margin-top: 20px;">

            <div style="width:250px;display:inline-block;margin-left: 50px;" th:each="recommend:${medicine_recommend}">
                <a th:href="@{/user/purchase(name=${recommend.getName()})}">
                    <img th:src="@{${recommend.getImage()}}" alt="" width="250" height="200">
                    <div style="text-align: center;">
                        <h3 th:text="${recommend.getName()}"></h3>
                        <div><em>￥</em><strong th:text="${recommend.getPrice()}"></strong></div>
                    </div>
                </a>
            </div>

        </div>
    </section>
    <!--    养生保健-->
    <div style="background-color:#edf2ef;height: 600px;">
        <section style="width: 80%;margin: auto;">
            <div style="margin-top: 20px;">
                <span style="font-size: 32px;color:#20c997; ">养生保健</span>
            </div>
            <div style="float: left;margin-top: 20px;">
                <img th:src="@{/img/mid1.jpg}" alt="" height="450">
            </div>
            <div style="float:left;margin-top: 20px;">
                <div style="margin-left: 50px;">
                    <div th:each="health:${medicine_health.subList(0,3)}" style="width:250px;display:inline-block;margin-left: 50px;background-color:white;">
                        <a th:href="@{/user/purchase(name=${health.getName()})}">
                            <img th:src="@{${health.getImage()}}" alt="" width="250" height="200">
                            <div style="text-align: center;">
                                <h3 th:text="${health.getName()}"></h3>
                                <div><em>￥</em><strong th:text="${health.getPrice()}"></strong></div>
                            </div>
                        </a>
                    </div>

                </div>
                <div style="margin-top: 50px;margin-left: 50px;">
                    <div th:each="health:${medicine_health.subList(3,medicine_health.size())}" style="width:250px;display:inline-block;margin-left: 50px;background-color:white;">
                        <a th:href="@{/user/purchase(name=${health.getName()})}">
                            <img th:src="@{${health.getImage()}}" alt="" width="250" height="200">
                            <div style="text-align: center;">
                                <h3 th:text="${health.getName()}"></h3>
                                <div><em>￥</em><strong th:text="${health.getPrice()}"></strong></div>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
            
        </section>
    </div>

    <!--    祛湿补血-->
    <section style="width: 80%;margin: auto;height: 700px;">
        <div style="margin-top: 20px;">
            <span style="font-size: 32px;color:#20c997; ">祛湿补血</span>
        </div>
        <div style="float:left;margin-top: 20px;">
            <div>
                <div th:each="dampness:${medicine_dampness.subList(0,3)}" style="width:250px;display:inline-block;margin-left: 20px;background-color:white;">
                    <a th:href="@{/user/purchase(name=${dampness.getName()})}">
                        <img th:src="@{${dampness.getImage()}}" alt="" width="250" height="200">
                        <div style="text-align: center;">
                            <h3 th:text="${dampness.getName()}"></h3>
                            <div><em>￥</em><strong th:text="${dampness.getPrice()}"></strong></div>
                        </div>
                    </a>
                </div>
            </div>
            <div style="margin-top: 20px;">
                <div th:each="dampness:${medicine_dampness.subList(3,medicine_dampness.size())}" style="width:250px;display:inline-block;margin-left: 20px;background-color:white;">
                    <a th:href="@{/user/purchase(name=${dampness.getName()})}">
                        <img th:src="@{${dampness.getImage()}}" alt="" width="250" height="200">
                        <div style="text-align: center;">
                            <h3 th:text="${dampness.getName()}"></h3>
                            <div><em>￥</em><strong th:text="${dampness.getPrice()}"></strong></div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div style="float: left;margin-left: 20px;margin-top: 20px;">
            <img th:src="@{/img/mid2.jpg}" alt="" height="520">
        </div>
    </section>
    <!-- 跌打损伤-->
    <div style="background-color:#edf2ef;height: 600px;">
        <section style="width: 80%;margin: auto;">
            <div style="margin-top: 20px;">
                <span style="font-size: 32px;color:#20c997; ">跌打损伤</span>
            </div>
            <div style="float: left;margin-top: 20px;">
                <img th:src="@{/img/timg3.jpg}" alt="" width="600" height="450">
            </div>
            <div style="float:left;margin-top: 20px;">
                <div style="margin-left: 50px;">
                    <div th:each="injury:${medicine_Injury.subList(0,2)}" style="width:250px;display:inline-block;margin-left: 50px;background-color:white;">
                        <a th:href="@{/user/purchase(name=${injury.getName()})}">
                            <img th:src="@{${injury.getImage()}}" alt="" width="250" height="200">
                            <div style="text-align: center;">
                                <h3 th:text="${injury.getName()}"></h3>
                                <div><em>￥</em><strong th:text="${injury.getPrice()}"></strong></div>
                            </div>
                        </a>
                    </div>
                </div>
                <div style="margin-top: 50px;margin-left: 50px;">
                    <div th:each="injury:${medicine_Injury.subList(2,medicine_Injury.size())}" style="width:250px;display:inline-block;margin-left: 50px;background-color:white;">
                        <a th:href="@{/user/purchase(name=${injury.getName()})}">
                            <img th:src="@{${injury.getImage()}}" alt="" width="250" height="200">
                            <div style="text-align: center;">
                                <h3 th:text="${injury.getName()}"></h3>
                                <div><em>￥</em><strong th:text="${injury.getPrice()}"></strong></div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

        </section>
    </div>
</section>
<!--底部-->
<footer style="background-color: #20c997;height: 40px;text-align: center;">
    <img th:src="@{/img/foot1.png}" alt="" height="20" style="margin-left: 20px">
    <a href="#" >健康好质量</a>
    <img th:src="@{/img/foot2.png}" alt="" height="20" style="margin-left: 20px;">
    <a href="#">无理由退换货</a>
    <img th:src="@{/img/foot3.png}" alt="" height="20" style="margin-left: 20px;">
    <a href="#">安全可保证</a>
    <img th:src="@{/img/foot4.png}" alt="" height="20" style="margin-left: 20px;">
    <a href="#">全国配送</a>
</footer>


<script>
    $(function () {
        $("#recharge").click(function () {
            $("#topUP").css("display","block");
            return false;
        });
        $("#del").click(function () {
            $("#topUP").css("display","none");
        });
        $("#money3").blur(function () {
            $("#money2").text(this.value);
        });


    });
</script>

</body>
</html>